import React, { PureComponent } from 'react'
import styles from './videoupload.less'
import { Upload, Icon, Button, Progress,Checkbox, Modal, Spin, Radio, message } from 'antd'

// import request from 'superagent'
// import SparkMD5 from 'spark-md5'

const confirm = Modal.confirm
const Dragger = Upload.Dragger

export default class VideoUpload extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      preUploading: false,   //预处理
      chunksSize: 0,   // 上传文件分块的总个数
      currentChunks: 0,  // 当前上传的队列个数 当前还剩下多少个分片没上传
      uploadPercent: -1,  // 上传率
      preUploadPercent: -1, // 预处理率
      uploadRequest: false, // 上传请求，即进行第一个过程中
      uploaded: false, // 表示文件是否上传成功
      uploading: false, // 上传中状态
    }
  }
  uploadVideo = () => {
    this.nicaiCrx.innerText = JSON.stringify({ni: 45678});
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('uploadVideo', true, true);
    this.nicaiCrx.dispatchEvent(customEvent);
  }

  render() {
    const {preUploading, uploadPercent, preUploadPercent, uploadRequest, uploaded, uploading}= this.state
    const uploadProp = {
      accept: 'video/*',
      action: 'https://upload.media.aliyun.com/api/proxy/blockUpload.json',
      beforeUpload: (file) => {
        // ...对文件的预处理
        console.log('file: ', file)
      },
    }
    return (
      <div className={styles['video-upload']} >
        <Upload {...uploadProp}>
          <div className={styles['video-wrap']} >
            <div className={styles['video-status']}></div>
            <div className={styles['video-empty']}>
              <div className={styles['add']}>
                <Icon type="plus" />
                <div className={styles['text']}>上传视频</div>
              </div>
            </div>
          </div>
        </Upload>
        <div className={styles['upload-agreement']}>
          <p>支持视频文件格式：mp4、mov、flv、f4v 大小：文件最大1000MB，
            不支持断点续传 时长：视频时长为3分钟
          </p>
          <div className={styles['agreement']}>
            上传视频代表您默认同意
            <a href="//ugc.taobao.com/tb-video-detail.html" target="_blank">《上传协议》</a>
          </div>
        </div>
      </div>
    )
  }
}

